<template>
     <div class="chat-box">
          <!-- 顶部标题 -->
          <div class="chat-title">好友聊天</div>

          <!-- 聊天内容 -->
          <div class="chat-content">
               <div class="date">今天</div>

               <!-- 对方消息 -->
               <div class="msg left">
                    <img src="https://picsum.photos/40/40" class="avatar">
                    <div class="bubble">早上好！</div>
                    <span class="time">08:30</span>
               </div>

               <!-- 自己消息 -->
               <div class="msg right">
                    <div class="bubble">早啊，今天天气不错~</div>
                    <span class="time">08:32</span>
               </div>

               <!-- 对方消息 -->
               <div class="msg left">
                    <img src="https://picsum.photos/40/40" class="avatar">
                    <div class="bubble">是啊，下午要不要一起去散步？</div>
                    <span class="time">08:35</span>
               </div>
          </div>

          <!-- 输入区 -->
          <div class="input-bar">
               <input type="text" placeholder="输入消息..." v-model="msg">
               <button @click="sendMessage">发送</button>
          </div>
     </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const msg = ref<string>('');

// 连接websocket 失败重连
let ws: WebSocket | null = null;
const connectWebSocket = () => {
     ws = new WebSocket('ws://localhost:8090');
    //  ws = new WebSocket('ws://47.94.6.186:3001');
     ws.onopen = function () {
          console.log('连接成功');
          startHeartbeat(); // 连接成功时启动心跳检测
     };
     ws.onmessage = function (event) {
          console.log('收到消息', event.data);
     };
     ws.onclose = function () {
          console.log('连接关闭');
     };
     ws.onerror = function (event) {
          console.log('连接错误', event);
     };
}
const sendMessage = () => {
     ws?.send(msg.value);
};
// 断线重连 5秒后重连 重连3次
const reconnect = () => {
     let count = 0;
     setTimeout(() => {
          count++;
          if (count >= 3) {
               return;
          }
          connectWebSocket();
     }, 5000);
};
// 心跳检测
const heartbeat = () => {
     setInterval(() => {
          ws?.send('heartbeat');
     }, 60000);
};
// 心跳检测 如果60s内没有收到心跳，则认为连接断开，重新连接
const heartbeatCheck = () => {
     setInterval(() => {
          if (ws?.readyState === WebSocket.CLOSED) {
               reconnect();
          }
     }, 60000);
};
// 什么时候调用心跳检测？
// 当连接成功时调用心跳检测
const startHeartbeat = () => {
     heartbeat();
     heartbeatCheck();
};
//为什么要写在onMounted中？
//因为onMounted是Vue3的钩子函数，会在组件挂载时执行，所以在这里连接websocket，避免组件卸载时连接中断。
onMounted(() => {
     connectWebSocket();
});


</script>

<style scoped>
.chat-box {
     width: 360px;
     height: 500px;
     border: 1px solid #eee;
     border-radius: 8px;
     margin: 20px auto;
     display: flex;
     flex-direction: column;
}

/* 标题栏 */
.chat-title {
     height: 48px;
     line-height: 48px;
     text-align: center;
     background: #07c160;
     color: white;
     font-size: 16px;
     border-radius: 8px 8px 0 0;
}

/* 聊天内容区 */
.chat-content {
     flex: 1;
     padding: 12px;
     background: #f0f0f0;
     overflow-y: auto;
}

.date {
     text-align: center;
     font-size: 12px;
     color: #666;
     margin: 8px 0;
}

.msg {
     margin: 10px 0;
     display: flex;
     align-items: flex-end;
     max-width: 75%;
}

.left {
     align-self: flex-start;
}

.right {
     margin-left: auto;
     flex-direction: row-reverse;
}

.avatar {
     width: 36px;
     height: 36px;
     border-radius: 4px;
     margin-right: 8px;
}

.bubble {
     padding: 8px 12px;
     border-radius: 8px;
     font-size: 14px;
}

.left .bubble {
     background: white;
     border-top-left-radius: 2px;
}

.right .bubble {
     background: #95ec69;
     border-top-right-radius: 2px;
}

.time {
     font-size: 10px;
     color: #999;
     margin: 0 6px;
}

/* 输入区 */
.input-bar {
     display: flex;
     padding: 8px;
     border-top: 1px solid #eee;
}

.input-bar input {
     flex: 1;
     height: 34px;
     border: 1px solid #ddd;
     border-radius: 17px;
     padding: 0 14px;
     outline: none;
     font-size: 14px;
}

.input-bar button {
     width: 58px;
     height: 34px;
     margin-left: 8px;
     background: #07c160;
     color: white;
     border: none;
     border-radius: 17px;
     cursor: pointer;
     font-size: 14px;
}
</style>